iT邦幫忙

2025 iThome 鐵人賽

DAY 3
0

上一篇文章了解如何建立的專案後,今天我們就來了解專案的架構
專案架構

  • tsconfig.app.jsontsconfig.jsontsconfig.spec.json:這三個是 TypeScript 的相關設定檔,設定一些 TypeScript 編譯的選項,除非熟悉 TypeScript 設定,否則不建議更動。
  • package.jsonpackage-lock.json:這兩個是 npm 的相關設定檔,記錄專案所需的套件和版本資訊,當我們安裝新的套件時,會自動更新這些檔案。
  • angular.json:這是 Angular CLI 的主要設定檔,跟 typeScript 設定檔一樣,通常不太需要更動,除非需要自訂一些建置選項。
  • .editorconfig:這是用來統一團隊成員在編輯器中的格式設定,例如縮排、換行等。
  • .gitignore:這是用來忽略不需要加入版本控制的檔案,例如 node_modules 資料夾。
  • src :這是我們主要開發的資料夾。
    • app:尤其是其中的 app 資料夾,幾乎所有的程式碼都會放在這個資料夾中。
    • styles.css:這是全域的樣式檔案,可以在這裡定義一些全域的 CSS 樣式。
    • index.html:這是應用程式的入口檔案,所有的元件都會被載入到這個檔案中。
    • main.ts:這是應用程式的主要 TypeScript 檔案,負責啟動 Angular 應用程式。
  • public:這是用來放置靜態資源的資料夾,例如圖片等,在專案需要進行建置時,這些檔案會被直接複製到建置後的輸出資料夾中。

檔案命名

根據 Angular CLI 的版本,會有不同的命名慣例

  • 在之前 Angular 版本中預設是以添加後綴的方式來命名檔案,例如:app.component.ts
  • 從 Angular 20 開始,預設情況下 Angular CLI 不會為元件、指令、服務和管道產生後綴。例如:app.ts

由於 Angular 維持有後綴命名慣例已經有一段時間了,因此這系列的文章也會以這種方式來命名檔案。讓我們在 angular.json 中的 schematics 加上這段設定,這樣可以在使用 Angular CLI 快速生成檔案的相關指令 (如 ng generate componentng generate service 等)時,會自動產生有後綴的檔案。

{  
"projects": {  
	"<project-name>": {  
	...  
	"schematics": {  
		"@schematics/angular:component": { "type": "component" },  
		"@schematics/angular:directive": { "type": "directive" },  
		"@schematics/angular:service": { "type": "service" },  
		"@schematics/angular:guard": { "typeSeparator": "." },  
		"@schematics/angular:interceptor": { "typeSeparator": "." },  
		"@schematics/angular:module": { "typeSeparator": "." },  
		"@schematics/angular:pipe": { "typeSeparator": "." },  
		"@schematics/angular:resolver": { "typeSeparator": "." }  
	},  
...  
}

schematics 的設定會影響你使用 Angular CLI ,產生檔案的預設選項。例如,你可以設定產生元件時是否自動建立測試檔、是否加上樣式檔案、預設使用哪種樣式(CSS、SCSS)等。

專案進入點

由於 Angular 預設採用 Single Page Application (SPA) 架構,所有 UI 的渲染都在瀏覽器端進行。因此,index.html 只包含一個 app-root 標籤,內容會由 Angular 框架在執行時動態產生與更新。

SPA 單頁式應用程式

  • Single Page Application (SPA) 是一種網頁應用程式架構,允許使用者在單一網頁上進行多次互動,而不需要重新載入整個頁面。
  • 所有 UI 渲染都在客戶端進行,並且透過 AJAX 或 Fetch API 與後端伺服器進行資料交換。這樣的設計可以提供更流暢的使用者體驗,因為頁面不需要頻繁地重新載入。
  • 缺點是 SEO 支援較差,因為實際上的內容是由 JavaScript 動態生成的,搜尋引擎可能無法正確索引這些內容。

在 Angular 專案中,應用程式的進入點是 main.ts 檔案,負責啟動 Angular 應用程式。啟動時,Angular 會將根元件 App 動態載入到 index.html 中的 app-root 標籤內。

就像圖片看到的一樣,原始碼不會有任何內容,所有的內容都是由 Angular 動態產生的,TypeScript 原始碼會被編譯成 JavaScript,這些檔案會被載入到 index.html 中,然後由瀏覽器執行,動態產生 DOM 結構。
原始碼
實際網頁

根據 Angular 版本不同,啟動方式略有差異,但核心概念一致。
目前 Angular 推薦的啟動方式:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';

bootstrapApplication(App, appConfig)
  .catch((err) => console.error(err));

當然根據的版本不同,你可能會看到不同的寫法,例如傳統的模組化寫法:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

這兩種寫法主要是獨立元件的寫法以及和傳統的模組化寫法。這在接下來的文章中會有更詳細的介紹。

結論

這篇文章主要介紹了 Angular 專案的基本架構與應用程式進入點,讓大家對於 Angular 專案的結構有初步的了解。下一篇文章會先介紹 Angular 框架的最小單位 - 元件(Component)。


上一篇
Day 2 - 環境安裝
下一篇
Day 4 - 元件
系列文
Angular 新手練功日誌:從零到職場冒險6
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言